<template>
  <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
           label-width="120px">

    <el-form-item label="边坡类型">
      <el-radio-group v-model="currentRow.slopeType">
        <el-radio-button v-for="item in EnumSlopeTypeList" :key="item.code" :label="item.code">{{item.name}}
        </el-radio-button>
      </el-radio-group>
    </el-form-item>

    <!--    路堑边坡、桥梁基坑边坡、隧道仰坡 -->
    <div v-if="currentRow.slopeType && currentRow.slopeType !== 4">
      <el-form-item label="岩土类型">
        <el-radio-group v-model="currentRow.structure">
          <el-radio-button v-for="item in EnumStructureList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="岩层倾向" v-if="currentRow.structure === 1 || currentRow.structure === 3 ">
        <el-radio-group v-model="currentRow.structureSide">
          <el-radio-button v-for="item in EnumStructureSideList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </div>
    <!--   路堤边坡-->
    <div v-if="currentRow.slopeType === 4">
      <el-form-item label="是否临河">
        <el-radio-group v-model="currentRow.hasRiver">
          <el-radio-button v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
        <el-form-item label="临河地形" v-if="currentRow.hasRiver === 1">
        <el-radio-group v-model="currentRow.riverType">
          <el-radio-button v-for="item in EnumRiverTypeList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </div>

    <div class="geology-children">
      边坡特征参数
    </div>
    <el-row>
      <el-col :span="6">
        <el-form-item label="坡向" prop="direction">
          <el-input v-model="currentRow.direction" clearable placeholder=""></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="边坡高度" prop="height">
          <el-input v-model="currentRow.height" type="number" c clearable placeholder="">
            <template slot="append">m</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="坡度" prop="poDu">
          <el-input v-model="currentRow.poDu" type="number" clearable placeholder="">
            <template slot="append">°</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="坡级" prop="slopeLevel" label-width="60px">
          <el-input-number v-model="currentRow.slopeLevel" clearable placeholder="" type="number" :maxlength="20" @keyup.native="number"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label-width="200px" label="周边环境信息(危害对象)">
      <el-checkbox-group v-model="currentRow.weiHaiDuiXiangList">
        <el-checkbox v-for="item in EnumWeiHaiDuiXiangList" :key="item.code" :label="item.code">{{item.name}}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="其他" prop="weiHaiDuiXiangOther"
                  v-if="currentRow.weiHaiDuiXiang && currentRow.weiHaiDuiXiang.indexOf(7) !== -1">
      <el-input v-model="currentRow.weiHaiDuiXiangOther" clearable placeholder="请描述其他重要建筑物"></el-input>
    </el-form-item>
    <el-form-item label="抗震设防等级">
      <el-radio-group v-model="currentRow.kangZhenLevel">
        <el-radio-button v-for="item in EnumKangZhenLevelList" :key="item.code" :label="item.code">{{item.name}}
        </el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="防洪标准">
      <el-radio-group v-model="currentRow.fangHongBiaoZhun">
        <el-radio-button v-for="item in EnumFangHongBiaoZhunList" :key="item.code" :label="item.code">{{item.name}}
        </el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="其他防洪标准" prop="fangHongOther" v-if="currentRow.fangHongBiaoZhun === 6">
      <el-input v-model="currentRow.fangHongOther" clearable placeholder="请描述其他防洪标准"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>

import ItemMixins from "./item.mixins";
import Enums from '@/utils/enums'

export default {
  props: ['value', 'isLook'],
  mixins: [ItemMixins,Enums],
  data() {
    return {
      EnumSlopeTypeList: [],
      EnumStructureList: [],
      EnumSysBooleanList: [],
      EnumRiverTypeList: [],
      EnumStructureSideList: [],
      EnumFangHongBiaoZhunList: [],
      EnumKangZhenLevelList: [],
      EnumWeiHaiDuiXiangList: [],
    }
  },
  computed: {
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    number(){
      this.currentRow.slopeLevel=this.currentRow.slopeLevel.replace(/[^\.\d]/g,'');
      this.currentRow.slopeLevel=this.currentRow.slopeLevel.replace('.','');
    },
    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    this.queryDictList(['EnumSlopeType', 'EnumStructure', 'EnumSysBoolean', 'EnumRiverType', 'EnumStructureSide','EnumFangHongBiaoZhun', 'EnumKangZhenLevel', 'EnumWeiHaiDuiXiang'],
      ['EnumSlopeTypeList', 'EnumStructureList', 'EnumSysBooleanList', 'EnumRiverTypeList', 'EnumStructureSideList', 'EnumFangHongBiaoZhunList', 'EnumKangZhenLevelList', 'EnumWeiHaiDuiXiangList']);
  }
}
</script>

<style lang="less">
  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;

  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

</style>
